<template>

	<view>


		<swiper class="swiper-box" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
			circular="true">
			<swiper-item v-for="(value, key) in commodity" :key="key" v-if="key.startsWith('img')">
				<image class="swiper-image" :src="value" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="wrap">
			<u-row>
				<u-col span="3">
					<h3>{{ commodity.name }}</h3>
				</u-col>
				<u-col span="10">
					<h5 :style="{ color: '#999' }"> | {{ commodity.describe }}</h5>
				</u-col>
			</u-row>
		</view>
		<hr class="separator"> <!-- 添加分隔线 -->
		<h5 class="five">商品详情:</h5>
		<view class="wrap">
			<u-row>
				<u-col span="12">
					<div class="info-box">
						<h5 class="info-item" style="margin-bottom: 5px;">价 格: <span
								:style="{ color: '#DC143C' }">{{ commodity.price }}￥</span></h5>
						<h5 class="info-item" style="margin-bottom: 5px;">库 存: <span
								:style="{ color: '#DC143C' }">{{ commodity.inventory }}份</span>
						</h5>
						<h5 class="info-item" style="margin-bottom: 5px;">分 类:
							<span v-for="cat in classificationList" :key="cat.id"
								:style="{ color: '#DC143C', }">{{ cat.name }}</span>
						</h5>

						<h5 class="info-item" style="margin-bottom: 5px;">商 家: <span
								:style="{ color: '#DC143C' }">{{ merchant.name }}</span>
						</h5>
					</div>
				</u-col>
			</u-row>
		</view>

		<!-- 弹出层 -->
		<u-button type="primary" class="buy-button" @click="showPopup()">点击购买</u-button>
		<u-popup ref="buyPopup" :show="popupVisible" mode="center">
			<view class="popup-content">
				<view class="quantity-selector">
					<text>请选择数量：</text>
					<u-number-box v-model="quantity" :min="1" :max="commodity.inventory"></u-number-box>
				</view>
				<view class="actions">
					<u-button type="primary" size="small" @click="verifyIdentity()">验证手机号下单</u-button>
					<u-button type="default" size="small" @click="popupVisible = false">关闭</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityId: null,
				//商品
				commodity: {
					id: null,
					name: null,
					describe: null,
					img1: null,
					img2: null,
					img3: null,
					price: null,
					inventory: null,
					merchant: null,
				},
				classification: {
					id: null,
					name: null,
					describe: null,
					merchantId: null,
				},
				//商户列表
				supplierGroups: [],
				merchant: {
					id: null,
					tele: null,
					name: null,
					password: null,
					avatar: null,
					qq: null,
					wechat: null,
					status: null,
				},
				//分类列表
				classificationList: [],
				// 已有数据保留
				popupVisible: false,
				quantity: 1, // 初始数量为1
			}
		},
		created() {
			//获取商品id
			this.getcommodityId();
			this.getById();
			this.getMerchantByCommodityId();
			this.paginationQueryClassificationByCommodity();
		},
		methods: {
			showPopup(type) {
				console.log('Trying to show popup');
				this.popupVisible = true; // 显示弹出层
			},

			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			verifyIdentity() {
				console.log("Selected Quantity:", this.quantity); // 输出选择的数量
				const url = '/pages/buy/buy?id=' + this.commodityId + '&quantity=' + this.quantity;
				this.goto(url);
				this.popupVisible = false;
			},
			/**
			 * 根据url获取商品id
			 */
			getcommodityId() {
				this.commodityId = this.$route.query.id;
				// alert(this.commodityId);
			},
			/**
			 * 根据id，获得商品详情
			 */
			getById() {
				const url = "http://localhost:8090/commodity/" + this.commodityId;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.commodity = res.data.data[0];
						console.log(this.commodity);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			},
			//根据商品id查询分类
			paginationQueryClassificationByCommodity() {
				const url = "http://localhost:8090/classification/getClassificationByCommodity/" + this.commodityId;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.classificationList = res.data.records;
						console.log(this.classificationList);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			},
			//根基商品id获得商家信息
			getMerchantByCommodityId() {
				const url = "http://localhost:8090/commodity/merchant/" + this.commodityId;
				uni.request({
					url: url,
					method: 'GET',
					header: {
						'content-type': 'application/json',
						'token': this.token
					},
					success: (res) => {
						this.merchant = res.data.data;
						console.log(this.merchant);
					},
					fail: (err) => {
						console.error('获取首页展示的商品列表请求失败：', err);
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	.swiper-box {
		height: 750rpx;
		background-color: #fff;

		.swiper-image {
			width: 750rpx;
			/* 固定图片宽度 */

		}
	}

	.wrap {
		padding: 24rpx;
	}

	.info-box {
		background-color: #f0f0f0;
		/* 浅灰色背景 */
		padding: 15px;
		/* 内边距 */
	}

	.info-item {
		text-align: justify;
		/* 对齐文本 */
		line-height: 1.4;
		/* 行高 */
	}

	.info-item span {
		margin-left: 15px;
		/* 左边距 */
	}

	.five {
		margin-left: 10px;
		margin-top: 10px;
	}

	.separator {
		border: none;
		border-top: 1px solid #999;
		/* 分隔线样式 */
		margin: 0 10px;
		font-weight: bold;
		/* 加粗 */
	}

	.buy-button {
		position: fixed;
		bottom: 0px;
		left: 50%;
		transform: translateX(-50%);
	}

	.detailed-images {
		margin-top: 0px;
		padding: 10px;
		padding-top: 0;
	}

	.detailed-image {
		margin-top: 15px;
		width: 100%;
	}

	.popup-content {
		padding: 20px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 90%;
		/* 可能需要调整宽度为百分比以适应不同屏幕 */
		border-radius: 5%;
	}

	.quantity-selector {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.actions {
		display: flex;
		justify-content: space-around;
		width: 100%;
	}
</style>